<!--
 * @Author: gyp
 * @Date: 2020-06-15 15:01:15
 * @LastEditors: gyp
 * @LastEditTime: 2020-06-18 14:04:38
 * @Description: 实时警情数列表
 * @FilePath: \sy_kjxc_web\src\views\screen\components\realtimealertnumDialog.vue
-->
<template>
  <div class="dataCheck">
    <el-dialog title="实时警情数" :visible.sync="visible" @closed="onClosed" custom-class="blue">
      <el-table :data="tableDatas && tableDatas.rows" border class="blueTable" style="width:100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="jjzzjgmc" label="接警组织名" min-width="110" />
        <el-table-column prop="jjyxm" label="接警员" min-width="60" />
        <el-table-column label="报警人性别" min-width="60">
          <template slot-scope="scope">{{ scope.row.bjrxb || '未知'}}</template>
        </el-table-column>
        <el-table-column prop="lxdh" label="报警人电话" min-width="70" />
        <el-table-column prop="BJSJ" label="报警时间" min-width="70" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :tabledatas="tableDatas" :isScreen="true" @comgetData="getAlertnumList" />
      <el-dialog
        title="查看明细"
        custom-class="blue"
        :visible.sync="innerVisible"
        append-to-body
        @closed="onInnerClosed"
      >
        <ul class="detail">
          <li class="detail-item">
            <label>重大警情</label>
            <div>{{ details.zdjq ? '是' : '否'}}</div>
          </li>
          <li class="detail-item">
            <label>案发地点</label>
            <div>{{ details.afdd}}</div>
          </li>
          <li class="detail-item">
            <label>报警内容</label>
            <div>{{ details.bjnr}}</div>
          </li>
          <li class="detail-item">
            <label>接警录音号</label>
            <div>{{ details.jjlyh}}</div>
          </li>
        </ul>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
export default {
  name: 'realtimenum-dialog',
  components: {
    Pagination
  },
  data () {
    return {
      visible: true, // 弹出框可见性
      tableDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      }, // 表格数据
      innerVisible: false, // 内层弹出框可见性
      details: {
        jjdbh: '',
        afdd: '',
        bjnr: '',
        jjygh: ''
      } // 当前详情
    };
  },
  created () {
    this.getAlertnumList();
  },
  methods: {
    getAlertnumList (pageNumber = 1) {
      let params = {
        pageSize: 10,
        pageNumber
      };
      this.$api.screen.alarmList(params).then(res => {
        this.tableDatas = {
          ...res.data.data,
          pageNum: pageNumber,
          pageSize: 10
        };
      });
    },
    // 关闭弹出框
    onClosed () {
      this.$emit('onRealtimealertClose');
    },
    // 每行点击操作
    handleClick (row) {
      this.innerVisible = true;
      this.details = row;
    },
    // 关闭内层弹出框
    onInnerClosed () {
      this.innerVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  border: dotted 1px #2c58a6;
  .detail-item {
    display: flex;
    align-items: flex-start;
    border-bottom: dotted 1px #2c58a6;
    padding: 20px;
    > label {
      width: 200px;
      color: #eee;
    }
    > div {
      width: calc(100% - 200px);
      color: #fff;
    }
  }
}
</style>
